<template>
    <div class="order">
        <div class="order-box">
            <el-form :model="numberValidateForm" ref="numberValidateForm" :label-position="labelPosition"
                class="demo-ruleForm">
                <!-- 基本信息 -->
                <div class="userInfo" style="margin-top: 40px;">
                    <div style="margin: 18px 20px; font-weight: 700;">基本信息</div>
                    <el-divider></el-divider>
                    <el-form-item label="用户ID:" prop="ID"
                        :rules="[{ required: true, message: '用户ID不能为空' }, { message: '用户ID必须为数字值' }]">
                        <el-input style="width: 340px; margin-left: 42px;" v-model="numberValidateForm.ID"
                            autocomplete="off" @blur="userInfoBtn(numberValidateForm.ID)">
                        </el-input>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="租赁属性:" style="margin-left: 20px;">
                        <el-select v-model="attributes" placeholder="全部 " style="width: 340px;margin-left: 28px;"
                            @change="attributesChange(attributes)">
                            <el-option v-for="item in attribute" :key="item.value" :label="item.name"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="支付方式:" style="margin-left: 20px;">

                        <el-select v-model="pay" placeholder="全部" @change="paymentModeChange(pay)"
                            style="width: 340px;margin-left: 28px;">
                            <el-option v-for="item in paymentMode" :key="item.value" :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="订单所属上级:" prop="superior" style="margin-left: 20px;">
                        <el-input style="width: 340px;" v-model="numberValidateForm.superior">
                        </el-input>
                    </el-form-item>
                    <el-divider></el-divider>
                </div>

                <!-- 用户信息 -->
                <div class="userInfo" style="margin-top: 40px; ">
                    <div style="margin: 18px 20px;font-weight: 700; ">用户信息</div>
                    <el-divider></el-divider>
                    <div style="display: flex;  margin-left: 20px;">
                        <div>
                            真实姓名:
                        </div>
                        <div style="margin-left: 31px;">
                            {{ userInfo.baseInfo.realName }}
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <div style="display: flex;  margin-left: 20px;">
                        <div>
                            手机号码:
                        </div>
                        <div style="margin-left: 31px;">
                            {{ userInfo.baseInfo.phoneNumber }}
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <div style="display: flex;  margin-left: 20px;">
                        <div>
                            电子邮箱:
                        </div>
                        <div style="margin-left: 31px;">
                            {{ userInfo.extraInfo.email }}
                        </div>
                    </div>
                    <el-divider></el-divider>
                </div>
                <!-- 商品信息 -->
                <div class="userInfo" style="margin-top: 40px;">
                    <div style="margin: 18px 20px; font-weight: 700;">商品信息</div>
                    <el-divider></el-divider>
                    <el-form-item label="租赁数量:" prop="num"
                        :rules="[{ required: true, message: '租赁数量不能为空' }, { message: '填入数量必须为数字' }]">
                        <el-input style="width: 340px; margin-left: 30px;" @input="numInput(numberValidateForm.num)"
                            v-model="numberValidateForm.num" maxlength="10" autocomplete="off">
                        </el-input> 套
                    </el-form-item>
                    <el-divider></el-divider>
                    <el-form-item label="所属水库:" style="margin-left: 20px;">
                        <el-select v-model="reservoirs" placeholder="全部 " style="width: 340px;margin-left: 28px;"
                            @change="reservoirsChange(reservoirs)">
                            <el-option v-for="item in reserveInfo" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-divider></el-divider>
                    <div style="display: flex;  margin-left: 20px;">
                        <div>
                            租赁年限:
                        </div>
                        <div style="margin-left: 31px;">
                            3年
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <div style="display: flex;  margin-left: 20px;">
                        <div>
                            租赁价格:
                        </div>
                        <div style="margin-left: 31px;">
                            ￥19900.00
                        </div>
                    </div>
                    <el-divider></el-divider>
                </div>


                <!-- 发票信息 -->
                <div class="userInfo" style="margin-top: 40px;">
                    <div style="margin: 18px 20px; font-weight: 700;">发票信息</div>
                    <el-divider></el-divider>
                    <div style="display: flex; margin-left: 20px;">
                        <div>
                            是否开票:
                        </div>
                        <div style="margin-left: 32px;">
                            <el-radio v-model="radio" label="0" @change="clickBtn(radio)">否</el-radio>
                            <el-radio v-model="radio" label="1" @change="clickBtn(radio)">是</el-radio>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <div v-if="radio == 1">
                        <el-form-item label="发票类型:" style="margin-left: 20px;">

                            <el-select v-model="type" placeholder="全部" @change="typeChange(type)"
                                style="width: 340px;margin-left: 28px;">
                                <el-option v-for="item in invoiceTypes" :key="item.value" :label="item.name"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-divider></el-divider>
                        <div style="display: flex; margin-left: 20px;">
                            <div>
                                选择类型:
                            </div>
                            <div style="margin-left: 32px;">
                                <el-radio v-model="personage" label="1" @change="clickPersonage(personage)">企业
                                </el-radio>
                                <el-radio v-model="personage" label="2" @change="clickPersonage(personage)">个人
                                </el-radio>
                            </div>
                        </div>
                        <el-divider></el-divider>
                        <el-form-item label="发票抬头:" prop="invoiceHeader"
                            :rules="[{ required: true, message: '发票抬头不能为空' }]">
                            <el-input style="width: 340px; margin-left: 30px;"
                                @change="riseInput(numberValidateForm.invoiceHeader)"
                                v-model="numberValidateForm.invoiceHeader" maxlength="30" autocomplete="off">
                            </el-input>
                        </el-form-item>
                        <el-divider></el-divider>
                        <el-form-item label="发票税号:" prop="dutyParagraph"
                            :rules="[{ required: true, message: '发票税号不能为空' }]">
                            <el-input style="width: 340px; margin-left: 30px;"
                                @change="dutyParagraphInput(numberValidateForm.dutyParagraph)"
                                v-model="numberValidateForm.dutyParagraph" maxlength="20" autocomplete="off">
                            </el-input>
                        </el-form-item>
                        <el-divider></el-divider>
                        <div v-if="type == 2">
                            <el-form-item label="发票地址:" prop="address"
                                :rules="[{ required: true, message: '发票地址不能为空' }]">
                                <el-input style="width: 340px; margin-left: 30px;"
                                    @change="addresshInput(numberValidateForm.address)"
                                    v-model="numberValidateForm.address" maxlength="50" autocomplete="off">
                                </el-input>
                            </el-form-item>
                            <el-divider></el-divider>
                            <el-form-item label="详细地址:" prop="addressedit"
                                :rules="[{ required: true, message: '详细地址不能为空' }]">
                                <el-input style="width: 340px; margin-left: 30px;"
                                    @change="addressedit(numberValidateForm.addressedit)"
                                    v-model="numberValidateForm.addressedit" maxlength="50" autocomplete="off">
                                </el-input>
                            </el-form-item>
                            <el-divider></el-divider>
                        </div>
                        <div v-if="type == 1">
                            <el-form-item label="电子邮箱:" prop="mailbox"
                                :rules="[{ required: true, message: '电子邮箱不能为空' }]">
                                <el-input style="width: 340px; margin-left: 30px;"
                                    @input="mailboxhInput(numberValidateForm.mailbox)"
                                    v-model="numberValidateForm.mailbox" maxlength="30" autocomplete="off">
                                </el-input>
                            </el-form-item>
                            <el-divider></el-divider>
                        </div>
                    </div>

                </div>
                <!-- 鱼苗信息 -->
                <div class="userInfo" style="margin-top: 40px;" v-show="attributes == 2 && 3">
                    <div style="margin: 18px 20px; font-weight: 700;">鱼苗信息</div>
                    <el-divider></el-divider>
                    <div style="display: flex; margin-left: 20px;">
                        <div>
                            选择鱼苗:
                        </div>
                        <div style="margin-left: 32px;">
                            <el-radio v-model="radioFish" label="1" @change="fishBtn(radioFish)">随机鱼苗</el-radio>
                            <el-radio v-model="radioFish" label="2" @change="fishBtn(radioFish)">自选鱼苗</el-radio>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <div v-if="radioFish == 1">
                        <div style="width: 1118px; display: flex;flex-wrap: wrap;">

                            <div class="userInfos" v-for="item in fishInfo" :key="item.index">
                                <div style="display: flex;margin: 20px;">
                                    <div>
                                        <img style="width: 220px; height: 100px;" :src="item.image" alt="">
                                    </div>
                                    <span style="margin-left: 10px;">{{ item.name }}</span>
                                </div>

                                <div class="weight">
                                    {{ item.weight }}斤
                                </div>
                            </div>
                        </div>

                    </div>
                    <div v-if="radioFish == 2">
                        <div style="width: 1118px; display: flex;flex-wrap: wrap;">
                            <div class="userInfos" v-for="item in fishInfo" :key="item.index">
                                <div style="display: flex;margin: 20px;">
                                    <div>
                                        <img style="width: 220px; height: 100px;" :src="item.image" alt="">
                                    </div>
                                    <span style="margin-left: 10px;">{{ item.name }}</span>
                                </div>

                                <div style="margin-left: 20px;">

                                    <van-stepper class="steppers" v-model="item.weight" :disable-plus="number9"
                                        step="10" max="300" min="0" :disable-input="true">
                                    </van-stepper>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <el-divider></el-divider>
                <div style="margin: 0 auto; text-align: center;">
                    <div style="margin: 0 auto; text-align: center;">
                    <el-button type="primary" @click="createOrder()">提交</el-button>
                    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
                </div>
                </div>
             

            </el-form>
            <el-divider></el-divider>
        </div>
    </div>
</template>

<script>
import { getUserById, reservoir, getReservoirFry, createOrder } from '@/api/user'
import { Toast } from 'vant';
export default {
    data() {
        return {
            radio: '0', //是否开票选择
            radioFish: '1', // 选择鱼苗
            labelPosition: "right",
            personage: '1', //发票选择方式
            pay: '', //支付选择信息
            attributes: '', //租赁属性
            userId: '', //用户ID
            saleUserId: '', //订单所属上级
            reservoirs: '', //获取水库信息
            reserveInfo: [],//水库信息
            type: 2, //发票类型
            userInfo: {
                baseInfo: {
                    realName: '',
                    phoneNumber: ''
                },
                extraInfo: {
                    email: ''
                }
            }, //用户信息
            numberValidateForm: {
                age: '',
                ID: '',
                num: 1,
                rise: '',
                dutyParagraph: '',
                duty: '',
                address: '',
                mailbox: '',
                superior: '',
                addressedit: ''
            },
            sizeForm: {
                region: ''
            },
            // 发票类型
            invoiceTypes: [
                {
                    name: '电子发票',
                    value: '1'
                },
                {
                    name: '纸质发票',
                    value: '2'
                }
            ],
            // 租赁属性
            attribute: [{
                name: '租赁3年获得40000元人民币',
                value: '1'
            },
            {
                name: '租赁3年鱼获自行处理',
                value: '2'
            },
            {
                name: '租赁3年获得2400斤鱼',
                value: '3'
            }
            ],
            // 支付类型
            paymentMode: [{
                name: '微信支付',
                value: 'wechatpay'
            },
            {
                name: '线下支付',
                value: 'offlinePay'
            }
            ],
            fryNature: 1, //	鱼苗性质：0.随机鱼苗 1.自选鱼苗
            reservoirId: '', // 水库ID
            fishInfo: [],
            fryList: [],
            dutyParagraph: '',
            invoiceAddress: '',
            invoiceHeader: '',
            invoiceNature: '2',
            invoiceEmail: '',
            invoiceType: '2',
            leaseNumber: '1',
            paymentModes: 'wechatpay',
            phoneNumber: '',
            invoiceDetailAddress: ''
        };
    },
    created() {
        this.reserveList()
        this.getReservoirFry()
        this.attributes = this.attribute[0].value
        this.type = this.invoiceTypes[1].value

    },
    computed: {
        number9() {
            let num = 0
            if (this.fishInfo.length != 0) {
                this.fishInfo.forEach(v => {
                    num = num + v.weight
                })

            }

            return num == 300

        }
    },
    methods: {
        resetForm(numberValidateForm) {
        this.$refs[numberValidateForm].resetFields();
      },
        // 提交
        async createOrder() {
            //    map 过滤
            var arr = this.fishInfo.map((v) => {
                let { fryId, weight
                } = v
                var obj = {
                    fryId, weight
                }

                return obj
            })

            let data = {
                // 租赁属性：0.未知 1.租赁3年不要鱼(默认) 2.租赁3年鱼自理
                attribute: this.attributes,
                // 税号
                dutyParagraph: this.dutyParagraph,
                // 电子邮箱
                email: this.userInfo.extraInfo.email,
                // 鱼苗列表
                fryList: arr,
                // 鱼苗类型(租赁属性为2时此列有值)：0.未知 1.随机鱼苗(默认) 2.自选鱼苗
                fryType: this.radioFish,
                // 收货地址
                invoiceAddress: this.invoiceAddress,
                // 详细地址
                invoiceDetailAddress: this.invoiceDetailAddress,
                // 是否需要开票标识 0.否 1.是
                invoiceFlag: this.radio,
                // 发票抬头
                invoiceHeader: this.invoiceHeader,
                // 发票性质 1.个人发票 2.企业发票
                invoiceNature: this.invoiceNature,
                // 发票类型 1.电子发票 2.纸质发票
                invoiceType: this.invoiceType,
                // 租赁渔方数量
                leaseNumber: this.leaseNumber,
                // 支付方式(wechatpay:微信支付,alipay:支付宝,bytedancepay:字节跳动)
                paymentMode: this.paymentModes,
                // 手机号码
                phoneNumber: this.userInfo.baseInfo.phoneNumber,
                // 真实姓名
                realName: this.userInfo.baseInfo.realName,
                // 水库ID
                reservoirId: this.reservoirId,
                // 发票邮箱
                invoiceEmail: this.invoiceEmail,
                // 订单所属上级
                saleUserId: this.numberValidateForm.superior,
                // 用户id
                userId: this.userInfo.baseInfo.id,
                // 	鱼米抵扣
                fishIntegral: 0,
                // 优惠价
                discountPrice: 0
            }
            let result = await createOrder(data)
            if (result.code == 0) {
                Toast('添加订单成功')
                setTimeout(() => {
                    this.$router.push('orderList')
                }, 200);
            }
        },
        // 根据水库查询鱼苗信息
        async getReservoirFry() {
            let data = {
                fryNature: this.radioFish,
                reservoirId: this.reservoirId
            }
            if (!this.reservoirId) {
                return;
            }
            let result = await getReservoirFry(data)
            if (result.code == 0) {
                this.fishInfo = result.data
                result.data.forEach(item => {
                    this.fryList.push({ fryId: item.fryId, weight: item.weight });
                })
            }

        },
        // 获取水库ID
        async reserveList() {
            let data = {
                enableStatus: -1,
                limit: -1,
                page: 1
            }
            let result = await reservoir(data)
            if (result.code == 0) {
                result.data.records.forEach(element => {
                    if (!element.enableStatus == 1) {
                        this.reserveInfo.push({ name: element.name, id: element.id });
                    }
                })
            }
            //默认水库名
            this.reservoirs = this.reserveInfo[0].name

        },
        // 查询用户信息
        async getUserById() {
            let data = {
                userId: this.userId
            }
            let result = await getUserById(data)
            if (result.code == 0) {
                this.userInfo = result.data
            }
        },
        // 输入id查询用户信息
        userInfoBtn(e) {
            var r = /^\+?[1-9][0-9]*$/;//正整数 
            if (!r.test(e)) {
                return;
            }
            if (e.length > 19) {
                return;
            }
            this.userId = e
            this.getUserById()
        },
        // 选择开票
        clickBtn(e) {
            this.radio = e
        },
        // 选择鱼苗
        fishBtn(e) {
            this.radioFish = e
            this.getReservoirFry()
        },
        // 用户信息
        // submitForm(formName) {
        //     this.$refs[formName].validate((valid) => {
        //         if (valid) {
        //             alert('submit!');
        //         } else {
        //             console.log('error submit!!');
        //             return false;
        //         }
        //     });
        // },
        // 租赁属性
        attributesChange(e) {

            this.attributes = e
        },
        // 发票选择
        clickPersonage(e) {
            if (this.radio == 0) {
                return;
            } else {
                this.invoiceNature = e
            }
        },
        // 发票类型
        typeChange(e) {
            if (this.radio == 0) {
                return;
            } else {
                this.invoiceType = e
            }

        },
        // 发票抬头
        riseInput(e) {
            if (this.radio == 0) {
                return;
            } else {
                this.invoiceHeader = e


            }
        },
        // 发票税号
        dutyParagraphInput(e) {
            if (this.radio == 0) {
                return;
            } else {
                this.dutyParagraph = e
            }

        },
        // 发票地址
        addresshInput(e) {
            if (this.radio == 0) {
                return;
            } else {
                this.invoiceAddress = e
            }
        },
        // 详细地址
        addressedit(e) {
            if (this.radio == 0) {
                return;
            } else {
                this.invoiceDetailAddress = e
            }
        },
        //发票邮箱
        mailboxhInput(e) {
            if (this.radio == 0) {
                return;
            } else {
                this.invoiceEmail = e

            }
        },
        // 获取水库信息
        reservoirsChange(e) {
            this.reservoirId = e
            this.getReservoirFry()
        },
        // 租赁数量
        numInput(e) {
            if (e) {
                this.leaseNumber = e
            }
        },
        // 支付方式选择
        paymentModeChange(e) {
            this.paymentModes = e
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang="scss" scoped>



.label {
    .buy_num {
        display: inline;
        margin-right: 5.86rem;
    }

    .btn_minute {
        border-radius: 0.133rem 0 0 0.133rem;
        padding: 0.146rem 0.2rem 0.146rem 0.226rem;
    }

    input {
        font-size: 12px;
        padding: 0.146rem 0.12rem;
        background: #f5f5f5;
        text-align: center;
    }

    .btn_add {
        border-radius: 0 0.133rem 0.133rem 0;
        padding: 0.146rem 0.226rem 0.146rem 0.2rem;
    }
}

.weight {
    margin-right: 50px;
    width: 50px;
    height: 30px;
    border: 1px solid #ccc;
    background-color: #ccc;
    text-align: center;
    line-height: 30px;
}

::v-deep .el-form-item__error {
    color: #F56C6C;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 43px;
}

[data-v-2a76a2eb].el-form-item {
    margin-bottom: 22px;
    margin-left: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
}

::v-deep.el-form-item {
    margin-bottom: 22px;
    display: flex;
    align-content: center;
}

::v-deep .el-form-item__label {
    // text-align: right;
    vertical-align: middle;
    float: none;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.order {
    width: 100%;
    height: 100%;

    .order-box {
        border: 1px solid #ccc;
        width: 98%;
        margin: 0 auto;

        .userInfo {
            // border: 1px solid #ccc;
            width: 98%;
            margin: 0 auto;
        }
    }

    .userInfos {
        border: 1px solid #ccc;
        width: 500px;
        margin-left: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>